<template>
  <el-select ref="sel" v-model="selected" :placeholder="placeholder" @change="handleChange" style="width: 100%;" clearable filterable :disabled="disabled">
    <el-option :value="member.userId" :label="member.nickName" :key="member.userId" v-for="member in members">
      <span style="float: left">{{ member.nickName }}</span>
      <span style="float: right; color: #46a6ff; font-size: 8px">
        {{member.phone}}
      </span>
    </el-option>
  </el-select>
</template>

<script>
import {listUserByBusinessType} from "@/api/system/user";

export default {
  name: "UserSysSelect",
  model: {
    prop: "value",
    event: "update"
  },
  props: {
    value: String,
    type: String,
    placeholder: String,
    onchange: Function,
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      members: []
    }
  },
  watch: {
    type: {
      handler() {
        this.loadData()
      },
    }
  },
  computed: {
    selected:{
      get() {
        return this.value
      },
      set(newV) {
        this.$emit('update', newV)
      },
    }
  },
  mounted() {
    this.loadData()
  },
  methods: {
    clear() {
      this.$refs.sel.trigger('clear');
    },
    loadData() {
      listUserByBusinessType(this.type).then(res=> {
        this.members = res.data || []
      })
    },
    handleChange() {
      if (this.onchange) {
        this.onchange();
      }
    },
  }

}
</script>

<style scoped>

</style>
